import React from 'react';
// also exported from '@storybook/react' if you can deal with breaking changes in 6.1
import { Story, Meta } from '@storybook/react/types-6-0';

import {
  Button,
  ButtonProps
 } from './index';

export default {
  title: 'Example/Button',
  component: Button,
  argTypes: {
    // https://github.com/storybookjs/storybook/blob/91e9dee33faa8eff0b342a366845de7100415367/addons/controls/README.md#control-annotations
    children: {
      control: 'text',
    },
    loadingText: {
      control: 'text',
    },
    // onClick: { action: 'clicked' }
  },
  args: {
    children: 'hello world'
  },
} as Meta;

const Template: Story<ButtonProps> = (args) => <Button {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  appearance: 'primary',
};

// https://github.com/storybookjs/storybook/blob/next/addons/controls/README.md#writing-stories
export const Buttons: Story<ButtonProps> = (args) => (
	<>
		<Button appearance="primary" onClick={() => 123}>Primary</Button>
		<Button appearance="secondary">Secondary</Button>
		<Button appearance="tertiary">Tertiary</Button>
		<Button appearance="outline">Outline</Button>
		<Button appearance="primaryOutline">Outline primary</Button>
		<Button appearance="secondaryOutline">Outline secondary</Button>
		<div style={{ background: "grey", display: "inline-block" }}>
			<Button appearance="inversePrimary">Primary inverse</Button>
		</div>
		<div style={{ background: "grey", display: "inline-block" }}>
			<Button appearance="inverseSecondary">Secondary inverse</Button>
		</div>
		<div style={{ background: "grey", display: "inline-block" }}>
			<Button appearance="inverseOutline">Outline inverse</Button>
		</div>
	</>
);

export const Sizes = () => (
	<>
		<Button appearance="primary">Default</Button>
		<Button appearance="primary" size="small">
			Small
		</Button>
	</>
);

export const Loading = () => (
	<>
		<Button appearance="primary" isLoading>
			Primary
		</Button>
		<Button appearance="secondary" isLoading>
			Secondary
		</Button>
		<Button appearance="tertiary" isLoading>
			Tertiary
		</Button>
		<Button appearance="outline" isLoading>
			Outline
		</Button>
		<Button appearance="outline" isLoading loadingText="Custom...">
			Outline
		</Button>
	</>
);

export const disabled = () => (
	<>
		<Button appearance="primary" disabled>
			Primary
		</Button>
		<Button appearance="secondary" disabled>
			Secondary
		</Button>
		<Button appearance="tertiary" disabled>
			Tertiary
		</Button>
		<Button appearance="outline" disabled>
			Outline
		</Button>
	</>
);

export const Link = () => (
	<>
		<Button appearance="primary" isLink href="/">
			Primary
		</Button>
		<Button appearance="secondary" isLink href="/">
			Secondary
		</Button>
		<Button appearance="tertiary" isLink href="/">
			Tertiary
		</Button>
		<Button appearance="outline" isLink href="/">
			Outline
		</Button>
	</>
);